<template>
	<view>
		<view class="search">
			<u--input placeholder="马卡龙色 多功能早餐机" border="surround" clearable></u--input>
			<u-button class="search_btn" color="#c55a5c" @click="$router.push('/pages/category/search/search_result')">
				<u-icon name="search" color="#fff" size="28"></u-icon>
			</u-button>
		</view>
		<view class="not_search">
			<image src="../../../static/img/user/not-search.jpg" mode=""></image>
			<view style="margin-top: 41rpx;">
				您搜索的商品还未上架
			</view>
		</view>
		<view class="likes">
			<view class="">
				猜你喜欢
			</view>
			<view class="border"></view>
		</view>
		<view class="info">
			<view class="store">
				<image src="../../../static/img/index/img-1.png" mode=""></image>
				<view class="store_detail">
					<view style="font-size: 26rpx;">丛林物语双面印花磨毛四件套</view>
					<view class="num">
						<view style="font-size: 24rpx;color: #999;">
							米白色
						</view>
					</view>
					<view style="font-size: 24rpx;color: #c55a5c;">￥399.00</view>
				</view>
				<view style="clear: both;"></view>
			</view>
			<view class="store">
				<image src="../../../static/img/center/bg.jpg" mode=""></image>
				<view class="store_detail">
					<view style="font-size: 26rpx;">丛林物语双面印花磨毛四件套</view>
					<view class="num">
						<view style="font-size: 24rpx;color: #999;">
							米白色
						</view>
					</view>
					<view style="font-size: 24rpx;color: #c55a5c;">￥399.00</view>
				</view>
				<view style="clear: both;"></view>
			</view>
			<view class="store">
				<image src="../../../static/img/index/img-6.png" mode=""></image>
				<view class="store_detail">
					<view style="font-size: 26rpx;">丛林物语双面印花磨毛四件套</view>
					<view class="num">
						<view style="font-size: 24rpx;color: #999;">
							米白色
						</view>
					</view>
					<view style="font-size: 24rpx;color: #c55a5c;">￥399.00</view>
				</view>
				<view style="clear: both;"></view>
			</view>

		</view>
		<view class="wrap">
			<u-back-top :scrollTop="scrollTop" :iconStyle="iconStyle"></u-back-top>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '综合',
				}, {
					name: '销量',
				}, {
					name: '新品'
				}, {
					name: '价格'
				}, ],
				tab: 0,
				scrollTop: 0,
				mode: 'square',
				iconStyle: {
					fontSize: '32rpx',
					color: '#fff'
				}
			}
		},
		methods: {
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			}
		}
	}
</script>

<style lang="scss">
	.search {
		display: flex;
		justify-content: space-between;
		padding: 18rpx 21rpx 26rpx 20rpx;
	}

	.likes {
		text-align: center;
		margin-top: 28rpx;

		.border {
			width: 80rpx;
			height: 1px;
			background-color: #c55a5c;
			margin: 0 auto;
			margin-top: 13rpx;
			margin-bottom: 24rpx;
		}
	}

	.search_btn {
		width: 78rpx;
		height: 67rpx;
		margin-left: 25rpx;
	}

	.not_search {
		padding: 74rpx 0 95rpx 0;
		background-color: #efefef;
		text-align: center;

		image {
			width: 154rpx;
			height: 186rpx;
		}
	}

	.info {
		border-top: 1px solid #ddd;
	}

	.store {
		background-color: #fff;
		padding: 34rpx 30rpx 36rpx 26rpx;
		margin-bottom: 35rpx;

		image {
			width: 201rpx;
			height: 190rpx;
			margin-right: 24rpx;
			float: left;

		}

		.store_detail {
			padding-top: 7rpx;
			padding-bottom: 17rpx;
			border-bottom: 1px solid #ddd;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
		}

		.num {
			margin-top: 29rpx;
			margin-bottom: 41rpx;

			text {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>